<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>英寸与毫米之间的换算</title>
<!--引入本地Vue库-->
<script src="vue.js"></script>
</head>
<body>	
<div id="main">	
 <!-- 将变量inch双向绑定到“英寸”对应的input-->
  英寸 : <input type = "text" v-model = "inch">
  <!--将变量millimeter双向绑定到“毫米”对应的input-->
  毫米 : <input type = "text" v-model = "millimeter">		
</div>
<p id="info"></p>
<script>
  var vm = new Vue({
      el: '#main',
	  //定义2个变量，并赋初值
      data: {
          inch:0,
          millimeter:0
          },
	  //对两个变量添加监听，同时定义处理方法
      watch : {
		  //当“英寸”对应的输入框中数字改变时，会触发该监听方法inch
		  //当变量inch的值变化时，改变millimeter变量的值
          inch:function (val) {
              this.inch = val
              this.millimeter = val*25.4  //单位换算
          },
		  //当“毫米”对应的输入框中数字改变时，会触发该监听方法millimeter
		  //当变量millimeter的值变化时，改变inch变量的值
          millimeter:function(val) {
			  this.millimeter = val
              this.inch = val/25.4      //单位换算            					
            }				
          }
      });
  // $watch 是一个实例方法
  vm.$watch('inch', function (newValue, oldValue) {
      // 这个回调将在英寸输入框中数字改变后调用
      document.getElementById ("info").innerHTML = "【英寸】修改前值为: " + oldValue + "，【英寸】修改后值为: " + newValue;
  })
</script>	
</body>
</html>
